<template>
  <div class="audio-test-page">
    <h1>音频管理功能测试</h1>
    
    <el-card class="mb-4">
      <template #header>
        <span>功能测试</span>
      </template>
      
      <el-space direction="vertical" size="large" class="w-full">
        <!-- 绘本选择器测试 -->
        <div>
          <h3>绘本选择器测试</h3>
          <el-button type="primary" @click="openBookSelector">打开绘本选择器</el-button>
          <div v-if="selectedBookInfo" class="mt-2">
            <el-tag type="success">已选择: {{ selectedBookInfo }}</el-tag>
          </div>
        </div>

        <!-- 音频表单测试 -->
        <div>
          <h3>音频表单测试</h3>
          <el-button type="primary" @click="openAudioForm('create')">创建音频</el-button>
          <el-button type="warning" @click="openAudioForm('update', 1)">编辑音频</el-button>
        </div>

        <!-- API测试 -->
        <div>
          <h3>API接口测试</h3>
          <el-space>
            <el-button @click="testGetBookSets">测试获取绘本集</el-button>
            <el-button @click="testGetBooks">测试获取绘本</el-button>
            <el-button @click="testCreateAudio">测试创建音频</el-button>
            <el-button @click="testGetAudioList">测试获取音频列表</el-button>
          </el-space>
        </div>

        <!-- 按钮功能测试 -->
        <div>
          <h3>按钮功能测试</h3>
          <el-space>
            <el-button type="primary" @click="testNewButton">测试新增按钮</el-button>
            <el-button type="warning" @click="testEditButton">测试编辑按钮</el-button>
            <el-button type="danger" @click="testDeleteButton">测试删除按钮</el-button>
          </el-space>
        </div>

        <!-- 测试结果显示 -->
        <div v-if="testResults.length > 0">
          <h3>测试结果</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(result, index) in testResults"
              :key="index"
              :type="result.success ? 'success' : 'danger'"
              :timestamp="result.timestamp"
            >
              <div>
                <strong>{{ result.action }}</strong>
                <div class="mt-1">{{ result.message }}</div>
                <div v-if="result.data" class="mt-1">
                  <el-tag size="small">数据: {{ JSON.stringify(result.data).substring(0, 100) }}...</el-tag>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-space>
    </el-card>

    <!-- 绘本选择器 -->
    <BookSelector ref="bookSelectorRef" @confirm="onBookSelected" />
    
    <!-- 音频表单 -->
    <AudioForm ref="audioFormRef" @success="onAudioFormSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as AudioApi from '@/api/reading/audio'
import BookSelector from './components/BookSelector.vue'
import AudioForm from './AudioForm.vue'

defineOptions({ name: 'AudioTestPage' })

const message = useMessage()

const bookSelectorRef = ref()
const audioFormRef = ref()
const selectedBookInfo = ref('')
const testResults = ref<Array<{
  action: string
  success: boolean
  message: string
  data?: any
  timestamp: string
}>>([])

// 添加测试结果
const addTestResult = (action: string, success: boolean, message: string, data?: any) => {
  testResults.value.unshift({
    action,
    success,
    message,
    data,
    timestamp: new Date().toLocaleTimeString()
  })
  
  // 限制结果数量
  if (testResults.value.length > 10) {
    testResults.value = testResults.value.slice(0, 10)
  }
}

// 绘本选择器相关
const openBookSelector = () => {
  bookSelectorRef.value.open()
}

const onBookSelected = (result: any) => {
  if (result.type === 'bookSet') {
    selectedBookInfo.value = `绘本集: ${result.bookSetTitle}`
  } else {
    selectedBookInfo.value = `绘本: ${result.bookTitle} (${result.bookSetTitle})`
  }
  
  addTestResult('绘本选择', true, '成功选择绘本', result)
  message.success('绘本选择成功')
}

// 音频表单相关
const openAudioForm = (type: string, id?: number) => {
  audioFormRef.value.open(type, id)
}

const onAudioFormSuccess = () => {
  addTestResult('音频表单', true, '音频表单操作成功')
  message.success('音频操作成功')
}

// API测试
const testGetBookSets = async () => {
  try {
    const data = await AudioApi.getBookSetList({ language: 'en' })
    addTestResult('获取绘本集', true, `成功获取 ${data.length} 个绘本集`, data)
    message.success('获取绘本集成功')
  } catch (error: any) {
    addTestResult('获取绘本集', false, `失败: ${error?.message || '未知错误'}`)
    message.error('获取绘本集失败')
  }
}

const testGetBooks = async () => {
  try {
    const data = await AudioApi.getBookList({ bookSetId: 1 })
    addTestResult('获取绘本', true, `成功获取 ${data.length} 个绘本`, data)
    message.success('获取绘本成功')
  } catch (error: any) {
    addTestResult('获取绘本', false, `失败: ${error?.message || '未知错误'}`)
    message.error('获取绘本失败')
  }
}

const testCreateAudio = async () => {
  try {
    const createData = {
      title: '测试音频',
      subtitle: '这是一个测试音频',
      category: 'english',
      language: 'en',
      enabled: true
    }

    const result = await AudioApi.createAudioResource(createData)
    addTestResult('创建音频', true, `成功创建音频，ID: ${result}`, { id: result })
    message.success('创建音频成功')
  } catch (error: any) {
    addTestResult('创建音频', false, `失败: ${error?.message || '未知错误'}`)
    message.error('创建音频失败')
  }
}

const testGetAudioList = async () => {
  try {
    const data = await AudioApi.getAudioResourcePage({ pageNo: 1, pageSize: 10 })
    addTestResult('获取音频列表', true, `成功获取 ${data.list?.length || 0} 个音频`, data)
    message.success('获取音频列表成功')
  } catch (error: any) {
    addTestResult('获取音频列表', false, `失败: ${error?.message || '未知错误'}`)
    message.error('获取音频列表失败')
  }
}

const testNewButton = () => {
  audioFormRef.value.open('create')
  addTestResult('新增按钮', true, '成功打开新增表单')
}

const testEditButton = () => {
  audioFormRef.value.open('update', 1)
  addTestResult('编辑按钮', true, '成功打开编辑表单（ID: 1）')
}

const testDeleteButton = () => {
  message.confirm('这是删除按钮的测试，不会真正删除数据')
    .then(() => {
      addTestResult('删除按钮', true, '删除按钮功能正常')
      message.success('删除按钮测试成功')
    })
    .catch(() => {
      addTestResult('删除按钮', true, '用户取消删除操作')
    })
}
</script>

<style scoped>
.audio-test-page {
  padding: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.w-full {
  width: 100%;
}
</style>
